<template>
  <div class="container" id="customers-list">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <navbar></navbar>
    </div>
    <div class="content">
      <h2 style="padding-bottom:20px">客户分群</h2>
      <h3>数据筛选</h3>
      <el-form :inline="true" id="search" class="search-form" size="small">
        <el-form-item label="分群">
          <el-input
              v-model="search.name"
              placeholder="请输入分群名称"
              clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="运行状态">
          <el-select
              v-model="search.status"
              placeholder="请选运行状态"
              clearable
              filterable
          >
            <el-option
                v-for="item in searchStatusArr"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新方式">
          <el-select
              v-model="search.updateWay"
              placeholder="请选择类型"
              clearable
              filterable
          >
            <el-option
                v-for="item in dictionaries.customer_group_refresh_type"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="fetchData('search')"
          >查询
          </el-button
          >
          <el-button
              type="primary"
              plain
              @click="fetchData('reset')"
          >重置
          </el-button
          >
        </el-form-item
        >
      </el-form>
    </div>
    <div class="content">

      <div class="btn-list">
        <div>
          <h3>客户分群</h3>
        </div>
        <div>
          <el-button
              size="mini"
              type="primary"
              @click="addGroup()"
          >新增
          </el-button
          >
        </div>
      </div>
      <!-- <CommonTable :dataList="page.list" :config="staffTableConfigs.list"  :typeStr='staffTableConfigs.type'  @suspension="handlerSuspension" @deleteFlock="handlerDeleteFlock"></CommonTable> -->
       <div class="table">
            <el-table
              :data="page.list"
              :header-cell-style="{ background: '#f8f8f8',color:'#363636' }"
              style="width: 100%"
               v-loading="loading"
            >
              <el-table-column label="分群" prop="name">
                <template slot-scope="props">
                  {{ props.row.name }}
                </template>
              </el-table-column>
              <el-table-column label="人数" prop="customerCount"> </el-table-column>

              <el-table-column label="更新时间" prop="updatedDate">
              </el-table-column>
              <el-table-column label="创建人" prop="createdLabel">
              </el-table-column>
              <el-table-column label="更新方式" prop="updateWayLabel">
              </el-table-column>
               <el-table-column label="状态" prop="statusLabel">
                <template slot-scope="props">
                  <p :class="props.row.status == 1 ? 'green' : ''||props.row.status == 2 ? 'red' : ''||props.row.status == 3 ? 'gray' : ''">
                    {{ props.row.statusLabel }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createdDate" ></el-table-column>
              <el-table-column label="操作" fixed="right" min-width="80px" >
                <template slot-scope="props">
                  <div class="operateBtn" >
                      <el-button type="text" @click="examine(props.row)">查看</el-button>
                      <el-button v-if="props.row.status==1" type="text" @click="suspension(props.row)">暂停</el-button>
                      <el-button v-if="props.row.status==2" type="text" @click="suspension(props.row)">启用</el-button>
                      <el-button type="text" @click="handlerDownload(props.row)">下载</el-button>
                      <div>
                        <el-dropdown>
                          <span class="el-dropdown-link">
                            <i style="font-size:12px" class="el-icon-more"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="changeHistory(props.row)"><el-button type="text" @click.native="changeHistory(props.row)">变更历史</el-button></el-dropdown-item>
                            <el-dropdown-item @click.native="deleteFlock(props.row)"><el-button type="text" >删除</el-button></el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                       </div>
                    </div>
                  </template>
              </el-table-column>
            </el-table>
          </div>
      <div class="page">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
            prev-text="上一页"
            next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
     <el-dialog
        :visible.sync="dialog.visible"
        width="540px"
        :before-close="handledeleteClose"
        append-to-body
        class="deletegroup"
      >
        <div
          slot="title"
          class="header-title"
          style="display: flex; align-items: center"
        >
          <span :class="dialog.type=='delete'?'el-iconStyle':'el-iconStyleTwo'"><i class="el-icon-warning"></i></span>
          <span style="padding-left: 12px; font-size: 22px">{{dialog.title}}</span>
        </div>
        <span v-if="dialog.type!='delete'" style="font-size: 16px; color: #333333"
          >是否{{labelState + labelName}}标签？</span
        >
        <span v-if="dialog.type=='delete'" style="font-size: 16px; color: #333333"
          >是否删除{{deleteLabelName}}分群?删除后将影响所有关联该分群的计算功能</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialog.visible = false"
            style="
              width: 120px;
              height: 36px;
              border: 1px solid #d9d9d9;
              opacity: 1;
              line-height: 2px;
              border-radius: 4px;
            "
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="deleteGroup"
            style="
              width: 120px;
              height: 36px;
              line-height: 2px;
              opacity: 1;
              border-radius: 4px;
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import CommonTable from './components/CommonTable.vue'
import common from './mixins/common'

export default {
  components: { navbar, CommonTable },
  mixins: [common],

  data () {
    return {
      deleteLabelName: '',
      labelState: '',
      labelName: '',
      suspensionRow: {},
      deleteRow: {},
      dialog: { visible: false, title: '', width: '', type: '' },
      loading: false,
      search: {
        name: '', // 人群名称 string
        updateWay: '', // 更新方式（字典：customer_group_refresh_type，1-例行）
        pageNo: 1, // 开始页数
        pageSize: 10, // 每页记录数
        status: '' // 人群状态（字典：customer_tag_status，1-启用，2-暂停，3-回收站）
      },
      searchStatusArr: [{ dictId: '1', dictName: '已启用' }, { dictId: '2', dictName: '暂停' }],
      page: { pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1, list: [] },
      staffTableConfigs: { // 员工排行榜
        type: 'operator',
        sortObj: { prop: 'marketPrice', order: 'descending' }, // 排序
        list: [
          { prop: 'brandName', label: '分群' },
          { prop: 'categoryId', label: '人群' },
          { prop: 'id', label: '更新时间' },
          { prop: 'marketPrice', label: '创建人' },
          { prop: 'soldNum', label: '更新方式' },
          { prop: 'status', label: '状态' },
          { prop: 'stock', label: '创建时间' },
          { label: '操作', fixed: 'right', width: 100, align: 'center' }
        ]

      }
    }
  },
  created () {
    // 初始表格
    this.search.assignUserId = JSON.parse(sessionStorage.getItem('user_id'))

    this.fetchData()
    this.useName = JSON.parse(sessionStorage.getItem('userInfo'))
    // // 获取字典值
    // for (const type in this.dictionaries) {
    //   this.getDictionaries(type)
    // }
  },
  mounted () {

  },
  activated () {
  },
  methods: {
    handlerDownload (row) { // 下载
      this.loading = true
      const params = {
        id: row.id
      }
      this.$api.classifyGroupSelectEmployeeKpiExport(params).then(res => {
        if (res.code == 0) {
          this.downloadlink(res.data)
          this.loading = false
        } else {
          this.loading = false
        }
      }).catch(err => { console.log(err) })
    },
    // 查看
    examine (row) {
      this.$router.push({ name: 'LabelGroupDetail', query: { tabsActiveName: 'pie', type: 'group', groupId: row.id }})
    },
    // 弹框确定
    deleteGroup () {
      console.log(this.dialog.type)
      if (this.dialog.type == 'delete') { // 删除
        console.log('rwerwerwerwerwerwe')
        const data = {
          id: this.deleteRow.id
        }
        this.$api.classifyGroupDelete(data).then(res => {
          if (res.code == 0) {
            this.$message.success('删除成功！')
            this.dialog.visible = false
            this.fetchData()
          }
        }).catch(err => { console.log(err) })
      } else if (this.dialog.type == 'start') { // 启用
        const data = {
          id: this.suspensionRow.id
        }
        this.$api.classifyGroupEnable(data).then(res => {
          if (res.code == 0) {
            this.$message.success('启用成功！')
            this.dialog.visible = false
            this.fetchData()
          }
        }).catch(err => { console.log(err) })
      } else { // 暂停
        const data = {
          id: this.suspensionRow.id
        }
        this.$api.classifyGroupDisable(data).then(res => {
          if (res.code == 0) {
            this.$message.success('暂停成功！')
            this.dialog.visible = false
            this.fetchData()
          }
        }).catch(err => { console.log(err) })
      }
    },
    // 新增分群
    addGroup () {
      this.$router.push({ name: 'labelAdd', query: { type: 'group', state: 'add' }})
    },
    // 弹框关闭
    handledeleteClose () {
      this.dialog.visible = false
    },
    // 暂停/启动
    suspension (e) {
      console.log(e)
      this.suspensionRow = e
      this.dialog.visible = true
      this.dialog.title = '确认提示'
      if (e.status == 2) {
        this.labelState = '启用'
        this.labelName = e.name
        this.dialog.type = 'start'
      } else {
        this.labelState = '暂停'
        this.labelName = e.name
        this.dialog.type = 'pause'
      }
    },
    // 变更历史
    changeHistory (row) {
      this.$router.push({ name: 'labelChangeRecord', query: { pageTitle: 1, groupId: row.id }})
    },
    // 删除
    deleteFlock (e) {
      console.log(e)
      this.dialog.visible = true
      this.dialog.title = '删除提示'
      this.dialog.type = 'delete'
      this.deleteRow = e
      this.deleteLabelName = e.name
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.fetchData()
    },
    fetchData (type) {
      this.loading = true
      if (type == 'reset') {
        this.search = {
          name: '', // 人群名称
          updateWay: '', // 更新方式
          status: '' // 人群状态

        }
        this.date = []
        this.page.pageNo = 1
        this.page.pageSize = 10
        this.page.currentPage = 1
      }
      const params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        name: this.search.name, // 否 	string 	人群名称
        updateWay: this.search.updateWay, // 更新方式
        status: this.search.status // 人群状态
      }
      if (type == 'search') {
        this.page.pageNo = 1
        this.page.pageSize = 10
        params.pageNo = 1
        params.pageSize = 10
        // 去除字符串 前后 空格
        for (const item in params) {
          if (typeof params[item] === 'string') {
            params[item] = params[item].trim()
          }
        }
      }

      this.$api.classifyGroupPageList(params).then((res) => {
        console.log(res, 'res')
        this.page.list = res.data.list
        this.page.totalNum = res.data.totalNum
        this.loading = false
      }).catch((err) => {
        this.loading = false
        console.log(err)
      })
    }
  }
  // 跳转客户资料
}
</script>

<style scoped lang="scss">
.search-form {
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    width: 100%;
    max-width: 303px;
    min-width: 299px;

    /deep/ .el-form-item__label {
      width: 70px;
    }

    /deep/ .el-form-item__content {
      width: calc(100% - 70px);

      .el-select, .el-date-editor, .el-cascader {
        width: 100%;
      }
    }
  }
}

.content {
  margin-bottom: 20px;
  padding: 20px !important;
  background-color: #ffffff;

  .btn-list {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .el-button {
      min-width: 128px;
      height: 36px;
      font-size: 16px;
      border: none;
    }
    .el-button--default {
      border: 0;
      color: #2d7edf;
    }
  }
}
.page{
  text-align: right;
  margin: 5px auto;
  /deep/.btn-prev, /deep/.btn-next{
    padding: 0 5px;
  }
}
.deletegroup {
  /deep/.el-dialog .el-dialog__header {
    background-color: #fff;
  }
  /deep/ .el-dialog__header {
    border: none;
  }
  /deep/.el-dialog__body {
    padding: 0 40px 10px 60px;
  }
  /deep/ .el-dialog__footer {
  border-top:none !important;
  margin-top: 10px;

}
.el-iconStyle{
  font-size: 28px;
  color: red
}
.el-iconStyleTwo{
  font-size: 28px;
  color:#EDB840
}
}
.operateBtn{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-dropdown{
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  justify-content: center;
  align-items: center !important;
  background: #e3edff !important;
  color:#7b96ee ;
  border-radius: 50%;
  font-size: 12px;
}
.red {
  color: #ff0000;
}
.green {
  color: #43bc82;
}
.gray {
  color: #666666;
}
</style>
